<template>
	<view>
		<view class="header">
			<view class="header-top">
				<span v-if="mustAnwser">*</span>
				<text>标题</text>
			</view>
			<textarea placeholder="请输入标题" placeholder-class="place" v-model="editForm.ti"></textarea>
		</view>
		<view class="main">
			<view class="main-title">设置</view>
			<view class="main-item flex">
				<text>文本验证</text>
				<view class="item-right flex">
					<picker @change="textCheck" :value="textIndex" :range="textArray">
						<view class="picker">
							{{text}}
						</view>
					</picker>
					<image :src="imgurl+'youjiantou.png'"></image>
				</view>
			</view>
			<view class="main-item flex" v-if="showxs">
				<text>输入框行数</text>
				<view class="item-right flex">
					<picker @change="Line" :value="lineIndex" :range="lineArray">
						<view class="picker">
							{{lineArray[lineIndex]}}
						</view>
					</picker>
					<image :src="imgurl+'youjiantou.png'"></image>
				</view>
			</view>
			<view class="main-item flex">
				<text>此题目必须回答</text>
				<switch :disabled="mustDis" @change="switchChange" color="#209FFC" :checked='mustAnwser' />
			</view>
			<view class="main-item-other flex" @tap="Show" v-if="show">
				<text>逻辑设置</text>
				<image :src="imgurl+'xiajiantou.png'"></image>
			</view>
			<view v-else>
				<view class="main-item flex" @tap="showCondition">
					<text>显示条件</text>
					<view class="item-right flex">
						<text v-text="editForm.xiantiao ? '已设置' : '未设置'">未设置</text>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
				<view class="main-item flex" @tap="jumpQuestion">
					<text>跳题设置</text>
					<view class="item-right flex">
						<text v-text="editForm.xuantiao ? '已设置' : '未设置'">未设置</text>
						<image :src="imgurl+'youjiantou.png'"></image>
					</view>
				</view>
			</view>
		</view>
		<button class="buttoncss" @tap="save">确认</button>
	</view>

	</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: '',
				textArray: ['无', '中文', '英文', '数字', '手机', '邮件', '网址'], // 校验类型
				textIndex: 0,
				text: '无',
				lineArray: ['1', '2', '3', '4', '5'],
				lineIndex: 0,
				show: true,
				showxs: true,
				mustAnwser: true, // 是否必答
				editForm: {
					ti: '',
					yan: '',
					id: '',
					wenid: '',
					xuantiao: '',
					xiantiao: '',
					beitiao: '',
					beizhu: '',
					pid: 3,
					order: '', // 校验类型1~7 ['无', '中文', '英文', '数字', '手机', '邮件', '网址']
					xuan: 1,
				},
				index: '',
				len: '',
				mustDis: false
			};
		},
		methods: {
			//文本验证
			textCheck(e) {
				this.textIndex = e.target.value
				this.editForm.order = parseInt(this.textIndex) + 1
				if(this.textIndex != 0) {
					this.mustAnwser = true
					this.editForm.xuan = 2
					this.mustDis = true
				} else {
					this.mustDis = false
				}
				this.text = this.textArray[this.textIndex]
				if (this.textIndex == 0) {
					this.showxs = true
				} else {
					this.editForm.yan = 1
					this.showxs = false
				}
			},

			//输入框行数
			Line(e) {
				this.lineIndex = e.target.value
				this.editForm.yan = this.lineArray[e.target.value]
			},

			//此题目是否必答
			switchChange(e) {
				if (e.target.value == true) {
					this.editForm.xuan = 2
					this.mustAnwser = true
				} else {
					this.editForm.xuan = 1
					this.mustAnwser = false
				}
			},
			//逻辑设置
			Show() {
				this.show = false
			},
			//显示条件
			showCondition() {
				if (this.index == 0) {
					uni.showToast({
						title: "第一次不能设置显示条件",
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.navigateTo({
						url: "../condition/condition?id=" + this.editForm.id + '&wenid=' + this.editForm.wenid + '&type=' + 3 +
							'&xiantiao=' + this.editForm.xiantiao
					})
				}
			},
			//跳题设置
			jumpQuestion() {
				if (this.index == this.len - 1) {
					uni.showToast({
						title: "最后一题不能跳题",
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.navigateTo({
						url: "../jumpQuestion/jumpQuestion?type=" + 3 + '&id=' + this.editForm.id + '&wenid=' + this.editForm.wenid +
							'&xuantiao=' + this.editForm.xuantiao
					})
				}
			},
			save() {
				this.editForm.api = 'wenupdate'
				api.add(this.editForm).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1500,
							success: () => {
								setTimeout(() => {
									if (app.globalData.flag == 1) {
										uni.redirectTo({
											url: '../../editDiaocha/editDiaocha?wenid=' + this.editForm.wenid
										})
									} else if (app.globalData.flag == 2) {
										uni.redirectTo({
											url: '../../createForm/editForm/editForm?wenid=' + this.editForm.wenid
										})
									} else {
										uni.redirectTo({
											url: '../../createVote/editVote/editVote?wenid=' + this.editForm.wenid
										})
									}
								}, 1500);
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getInfo(data) {
				let that = this
				api.look(data).then(res => {
					this.editForm = res.date
					if(this.editForm.xuan == 2) {
						this.mustAnwser = true
					} else {
						this.mustAnwser = false
					}
					this.textIndex = parseInt(this.editForm.order) - 1
					this.text = this.textArray[this.textIndex]
					if (this.textIndex == 0) {
						this.showxs = true
					} else {
						this.editForm.yan = 1
						this.showxs = false
					}
					this.lineIndex = this.editForm.yan - 1
					this.$store.commit('setTiEditForm', this.editForm)
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			if (this.$store.state.tiIndex) {
				this.index = this.$store.state.tiIndex
			}
			this.len = app.globalData.len
			this.imgurl = app.globalData.imgurls
			if (options.id) {
				this.id = options.id
				this.getInfo({
					api: 'wenudan',
					id: options.id
				})
			} else {
				this.editForm = this.$store.state.tiEditForm
				if(this.editForm.xuan == 2) {
					this.mustAnwser = true
				} else {
					this.mustAnwser = false
				}
				this.textIndex = parseInt(this.editForm.order) - 1
				console.log('sssss', textIndex)
				this.text = this.textArray[this.textIndex]
				if (this.textIndex == 0) {
					this.showxs = true
				} else {
					this.editForm.yan = 1
					this.showxs = false
				}
				this.lineIndex = this.editForm.yan - 1
				
				'xuantiao' in options ? this.editForm.xuantiao = options.xuantiao : ''
				if (this.editForm.xuantiao === 0) {
					this.editForm.xuantiao = ''
				}
				'xiantiao' in options ? this.editForm.xiantiao = options.xiantiao : ''
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-weight: 500;
		font-family: PingFang SC
	}

	.header {
		width: 100%;
		background: #fff;
		padding: 20rpx 0rpx;

		.header-top {
			width: 690rpx;
			margin: 0 auto;
			color: #333;
			font-size: 32rpx;

			span {
				color: #ff0000;
				margin-right: 10rpx;
			}
		}

		textarea {
			padding: 20rpx 0 0 30rpx;
			width: 690rpx;
			margin: 10rpx auto;
			box-sizing: border-box;
			height: 100rpx;
			border: 1rpx solid #DFDFDF;
			border-radius: 10rpx;
		}
	}

	.place {
		color: #999;
		font-weight: normal;
		font-size: 30rpx;
	}

	.main {
		background: #fff;
	}

	.main-title {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		color: #999;
		font-size: 24rpx;
		padding-left: 20rpx;
		background: #F0F0F0;
	}

	.main-item {
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		border-bottom: 1rpx solid #DFDFDF;
		justify-content: space-between;

		.item-right {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.picker {
		width: 400rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.main-item-other {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
		justify-content: center;

		image {
			width: 35rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 40rpx;
		border-radius: 50rpx;
		background: #209FFC;
		margin-top: 150rpx;
	}
</style>
